// import deepMerge from 'deepmerge'


/**
 * ZDragHighlightMixin
 * 拖动组件的公用类
 */
export let ZDragHighlightMixin = {
  inject: ['dragxml'],
  data() {
    return {
      _zdrag__setCurHighLightUUID: ""
    }
  },
  methods: {
    zdrag__highlight_cls(key, value) {
      let isHighLight = false
      let current = this.dragxml.getCurrentSelected()
      if (current.origin && current.origin[key]) {
        isHighLight = (value === current.origin[key])
        if (key === 'layoutUUID') {
          // console.log(key, current.origin[key], value)
        }
      }
      if (isHighLight) {
        this.dragxml.highLight(this)
      }
      return {
        ['z-drag-highlight']: isHighLight
      }
    },
    private__onHighlightChanged(uuid) {
      this._zdrag__setCurHighLightUUID = uuid
    }
  },
  mounted() {
    this.dragxml.emitter.on(
      this.dragxml.EVENTS.HIGHLIGHT,
      this.private__onHighlightChanged
    )
  },
  beforeUnmount() {
    this.dragxml.emitter.off(
      this.dragxml.EVENTS.HIGHLIGHT,
      this.private__onHighlightChanged
    )
  },
}

export let ZDragCommonMixin = {
  inject: ['dragxml', 'draginit', 'cusDragXml', 'ZDragGridIns'],
  mixins: [
    ZDragHighlightMixin
  ],
  emits: [
    'move-enter'
  ],
  props: {
    layout_uuid: String,
    uuid: String
  },
  data() {
    // console.log(this.uuid)
    let config = this.dragxml.getConfig(this.uuid)
    // console.log('config', config)
    return {
      ui_config_editor: config ?? {
        ui: {
          widgetConfig: {}
        }
      },
      ui_cached: {
        common: {}
      },
      cus_ref: null,
      locked: false,
      ui_form_config: this.cusDragXml.getFormConfig(),
      isHighlight: false,
      v2: ''
    }
  },
  computed: {
    form_config() {
      // if (this.cusDragXml && this.cusDragXml.getFormConfig) {
      //   return this.cusDragXml.getFormConfig()
      // }
      // console.log('ui_form_config', this.ui_form_config)
      return this.ui_form_config
    },
    zdrag__form_config() {
      return this.ui_form_config
    },
    cus_config() {
      let config = this.ui_config_editor ?? { }
      let _s = Object.assign({
        ...this.INIT_CONFIG ?? {},
        ui: this.ui ?? {
          widgetConfig: {}
        },
      }, this.self_config ?? {})
      let _c =  ZY.lodash.merge(_s, config.ins ?? {})
      if (!_c.server) {
        _c.server = {}
      }
      if (!_c.server.field_name) {
        _c.server.field_name = 'field__' + ZY.rid(10)
      }
      // console.log('cus_config', _c, this)
      if (this.locked) {
        this.locked = false
      } else {
        this.dragxml.onCusConfigChange(this.uuid, _c)
      }
      return _c
    },
    zdrag__cus_config() {
      return this.cus_config
    }
  },
  beforeMount() {
    // console.log(this.cus_config)
    this.private__handle_zlayoutinit()
  },
  methods: {
    private__handle_zlayoutinit() {
      if (this.draginit && this.draginit.setLayout) {
        if (this.cus_config?.ui?.column) {
          this.draginit.setLayout(this.cus_config?.ui?.column)
        }
      }
    },
    zdrag__state_cls() {
      return {
        // ['v2']: this.v2,
        ['z-dragxml--is-highlight']: (this.uuid === this._zdrag__setCurHighLightUUID)
      }
    },
    zdrag__highlight() {
      return this.zdrag__highlight_cls('itemUUID', this.uuid)
    },
    zdrag__get_cus_ref(el) {
      this.cus_ref = el
      // console.log(this.cus_ref)
    },
    onConfigChanged() {
      // console.log('onConfigChanged', e)
      let c = this.dragxml.getConfig(this.uuid)
      // if (c.common) {
      //   this.ui_cached.common = c.common
      // }
      this.ui_config_editor = c;
      setTimeout(() =>{
        this.private__handle_zlayoutinit()
      }, 50)
    },
    onFormConfigChanged() {
      // console.log('onFormConfigChanged')
      this.ui_form_config = this.cusDragXml.getFormConfig()
    },
    // GET_CONFIG(path, defaultVal) {
    //   return ZY.lodash.get(this.cus_config, path, defaultVal)
    // },
    zdrag__GET_CONFIG(path, defaultVal) {
      return ZY.lodash.get(this.cus_config, path, defaultVal)
    },
    // onMouseEnter(e) {
    //   // console.log('onMouseEnter', e)
    //   this.dragxml.onMouseEnter(e)
    // },
    // onMouseLeave(e) {
    // },
    zdrag__onMouseEnter(e) {
      // console.log('onMouseEnter', e)
      this.dragxml.onMouseEnter2(e.target, {
        com: this.$options,
        ctx: this
      })
    },
    handleDragXmlButtonClick(dragXmlCtx) {
      // console.log('handleDragXmlButtonClick', dragXmlCtx)
      dragXmlCtx.selectCurrentSetAsidePanel({
        com: this.$options,
      }, {
        uuid: this.uuid
      })
    },
    handleDragXmlButtonDelete(dragXmlCtx)  {
      console.log('handleDragXmlButtonDelete', dragXmlCtx, this)
      let trueDom = dragXmlCtx.trueDom
      if (trueDom.hasAttribute('data-context-uuid')) {
        let contextUUID = trueDom.getAttribute('data-context-uuid')
        let hostContext = dragXmlCtx.DRAG_INSTANSE.getRegisterCtx(contextUUID)
        if (hostContext && hostContext.handleDragXmlButtonDelete) {
          console.log(hostContext)
          hostContext.handleDragXmlButtonDelete(dragXmlCtx)
        }
      }
    }
  }

  ,
  mounted() {
    this.dragxml.register(this.uuid, this)
    this.dragxml.emitter.on(
      this.dragxml.EVENTS.CHANGED,
      this.onConfigChanged
    )
    this.dragxml.emitter.on(
      this.dragxml.EVENTS.FORM_CONFIG,
      this.onFormConfigChanged
    )
    if (this.ZDragGridIns) {
      this.ZDragGridIns.register(this)
    }
    // this.ZDragGridIns.register(this.uuid, this)
  },
  beforeUnmount() {
    this.dragxml.unRegister(this.uuid)
    this.dragxml.emitter.off(
      this.dragxml.EVENTS.CHANGED,
      this.onConfigChanged
    )
    this.dragxml.emitter.on(
      this.dragxml.EVENTS.FORM_CONFIG,
      this.onFormConfigChanged
    )
    if (this.ZDragGridIns) {
      this.ZDragGridIns.unRegister(this)
    }
    // this.ZDragGridIns.register(this.uuid, this)
  }
}
